<template>
	<div class="app-container">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="报损人">
    <el-input v-model="formInline.name" placeholder="操作人员"></el-input>
  </el-form-item>
  <el-form-item label="所属仓库">
    <el-select v-model="formInline.depotId" placeholder="所属仓库">
      <el-option v-for="plate in depots" :value="plate.id" :key="plate.id"             
               :label="plate.name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="所属商品">
    <el-select v-model="formInline.productId" placeholder="所属商品">
      <el-option v-for="pl in updateId" :value="pl.id" :key="pl.id"             
               :label="pl.name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="报损时间">
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="开始日期" v-model="formInline.date1" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-date-picker type="date" placeholder="结束日期" v-model="formInline.date2" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit(Sa=true)">查询</el-button>
  </el-form-item>
</el-form>
	<el-table :data="table.tableData" style="width: 100%">
      <el-table-column prop="id" label="报损编号" width="80">
      </el-table-column>
      <el-table-column prop="createTime" label="报损时间" width="160">
      </el-table-column>
      <el-table-column prop="productname" label="商品名称" width="80">
      </el-table-column>
      <el-table-column prop="unit" label="商品单位" width="80">
      </el-table-column>
      <el-table-column prop="standby1" label="单价" width="80">
      </el-table-column>
      <el-table-column prop="num" label="商品数量" width="80">
      </el-table-column>
      <el-table-column prop="username" label="操作用户" width="80">
      </el-table-column>
      <el-table-column prop="depotname" label="仓库" width="80">
      </el-table-column>
      <el-table-column prop="total" label="报损金额" width="80">
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changePage"
      v-if="table.isShow"
      background
      layout="prev, pager, next"
      :current-page="1"
      :total="table.total"
      :page-size="table.pageSize"
    >
    </el-pagination>
    </div>
</template>

<script>
	import { lossesall} from "@/api/losses.js";
	import {showAll as show} from '@/api/product';
	import {getAll} from '@/api/depot';
	export default {
      data() {
         return {
       updateId:[],
       depots:[],
       table:{
        page:1,
        limit:3,
        total: 3,
        pageSize:3,
        //显示分页
        isShow: true,
        tableData: []
      },
      Sa:false,
      showell:{
      	  name: '',
          depotId: '',
          productId: '',
          date1:'',
          date2:''
          },
       formInline: {
          name: '',
          depotId: '',
          productId: '',
          date1:'',
          date2:''
        }
    };
   },
  created: function () {
  	//页面加载时获取仓库数据
      getAll({}).then((res)=>{
      	this.depots=res.data;
      });
      //页面加载时获取商品数据
      show({}).then((res)=>{
      	this.updateId=res.data;
      });
      //页面加载时执行获取报损日志数据
      this.changePage(1);
  },
  methods: {
    changePage(pageNum) {
    	this.table.page=pageNum;
    	//翻页功能
      lossesall({
      	'page':pageNum,
        'limit':this.table.limit,
        'name':this.showell.name,
        'typeName2':this.showell.depotId,
        'typeName3':this.showell.productId,
        'beginDate':this.showell.date1,
        'endDate':this.showell.date2
      }).then((response) => {
        this.table.tableData = response.data;
      this.table.total = response.count;
    });
    },
    onSubmit() {
    if(this.Sa){//保存本次操作的信息
    this.showell.name=this.formInline.name;
    this.showell.depotId=this.formInline.depotId;
    this.showell.productId=this.formInline.productId;
    this.showell.date1=this.formInline.date1;
    this.showell.date2=this.formInline.date2;
    this.Sa=false;}
        lossesall({
        'page':this.table.page,
        'limit':this.table.limit,
        'name':this.formInline.name,
        'typeName2':this.formInline.depotId,
        'typeName3':this.formInline.productId,
        'beginDate':this.formInline.date1,
        'endDate':this.formInline.date2
        }).then((response) => {
        this.table.tableData = response.data;
      this.table.total = response.count;
    });
      }
  }
   };
</script>

<style>
</style>